<template>
    <div class="red-door">

        <!--S红包上部分封面-->
        <div id="top" :class="top_class">

            <!--S红包内容-->
            <div class="content">

                <!--S发包用户信息-->
                <div class="owner-user">
                    <img class="header" v-lazy="red.owner_header" />
                    <p class="nickname">{{red.owner_nickname}}的红包</p>
                </div>
                <!--E发包用户信息-->

                <!--S红包标题-->
                <div class="title">
                    {{red.title}}
                </div>
                <!--E红包标题-->

            </div>
            <!--E红包内容-->

        </div>
        <!--E红包上部分封面-->

        <!--S开包按钮-->
        <div id="open-button"
             :class="open_button_class"
             @click="clickOpenButton"
             v-if="open_button_show"
            >
            開
        </div>
        <!--E开包按钮-->

        <!--S红包下部分封面-->
        <div id="bottom" :class="bottom_class">

            <!--S红包记录-->
            <router-link class="red-record" :to="$route.path+'/record/'+red.id">
                查看领取记录<i class="iconfont icon-jiantou"></i>
            </router-link>
            <!--E红包记录-->

        </div>
        <!--E红包下部分封面-->

    </div>
</template>

<script>
// 红包封面，门
import {open, openCheck} from "@/util/open"
export default {
    name: "red-door",
    data() {
      return {
          // 红包按钮动画class
          open_button_class: "not",
          // 红包封面上半部分动画class
          top_class: "",
          // 红包封面下半部分动画class
          bottom_class: "",
          // 红包按钮显示状态
          open_button_show:true,
          // 是否已经提交表单
          submit_form: false
      }
    },
    props: {
      // 红包信息
      red: {
        type: Object
      },
      under: {
          type: String,
          default: "not"
      }
    },
    computed: {
        /**
         * 开红包按钮显示状态
         */
        openButtonShow() {
            if(this.under === "not"){
                return true
            } else {
                return false
            }
        },
        // 是否显示提交表单开红包
        show_submit_form() {
            return (this.red.red_form === 1 && !this.submit_form && !this.red.submit_form)
        }
    },
    methods: {
        // Handle
        /**
         * 点击开红包按钮
         */
        clickOpenButton() {
            if(this.show_submit_form) {
                let RedForm = this.$createRedForm({
                    is_show: true,
                    form_id: parseInt(this.red.red_form_id),
                    red_id: parseInt(this.red.id),
                    onClose() {
                        RedForm.remove()
                    },
                    onSuccess: () => {
                        this.submit_form = true
                        this.readyOpen()
                        RedForm.remove()
                    }
                })
            } else {
                this.readyOpen()
            }
        },
        readyOpen() {
            if(this.open_button_class === "not"){
                if(this.red.question === 1) {
                    // 选择题
                    let Question = this.$createQuestion({
                        is_show:new Date().getTime(),
                        type: 'choice',
                        reset: false,
                        data: this.red.choice_question,
                        onClose() {
                            Question.remove()
                        },
                        onConfirm: () => {
                            this.openRed()
                            Question.remove()
                        }
                    })
                } else if(this.red.question === 2) {
                    // 问答题
                    let Question = this.$createQuestion({
                        is_show:new Date().getTime(),
                        type: 'answer',
                        reset: false,
                        data: this.red.answer_question,
                        onClose() {
                            Question.remove()
                        },
                        onConfirm: () => {
                            this.openRed()
                            Question.remove()
                        }
                    })
                } else {
                    // 没有设置问答的红包，直接打开
                    this.openRed()
                }
            }
        },
        /**
         * 开红包
         */
        openRed() {
            if(!openCheck(this,this.red)) return;
            this.open_button_class = "opening"
            open(this.red.id)
                .then((res) => {
                    let data = res.data.data
                    this.open_button_class = "not"
                    this.top_class = this.bottom_class = "opened"
                    this.open_button_show = false
                    this.$emit("success",{red_id:this.red.id,money:data.money})
                    this.$emit("changeUnder","success")
                })
                .catch((error) => {
                    this.$createToast({
                        time: 2000,
                        txt: error.data.message,
                        type: 'error',
                        mask: true,
                        onTimeout:() => {
                            this.open_button_class = "not"
                        }
                    }).show()
                })
        }
    }
}
</script>

<style scoped lang="less" src="./red-door.less"></style>
